import React ,{useState,useEffect,useRef,RefObject} from 'react'
import axios from 'axios'
import '../../styles/article.css'
import { HeartOutlined ,BranchesOutlined,EyeOutlined} from '@ant-design/icons'
import {useNavigate} from 'react-router-dom'

export default function Alldata() {
  let [alldata,setAlldata] = useState<Array<any>>([])
  let [newdata,setNewdata] = useState({})
  let [num,setNum] = useState(0)
  let navigate = useNavigate()
  let watcherDom:RefObject<HTMLDivElement> = useRef(null)
  useEffect(()=>{
    let sjs = Math.floor(Math.random()*13)
    let newData:Array<any> = new Array(1).fill(alldata[sjs])
    if(num === 1){
      setAlldata([...alldata].concat(newData))
    }
  },[newdata])
  useEffect(()=>{
    axios.get('/api/article').then(res=>{
      setAlldata(res.data.data[0])
    })
    let observer = new IntersectionObserver((enteries:any,observer:any)=>{
      setTimeout(()=>{
        setNum(1)
      },1000)
      setNewdata({})
    })
    observer.observe((watcherDom.current as Element))
    // return ()=>{
    //   observer.unobserve((watcherDom.current as Element))
    // }
  },[])
  return (
      <div className='alldata-wrap'>
          <ul className='alldata-ul'>
              {
                alldata.map((item:any,index:number)=>{
                  return <li
                  key={index}
                  onMouseOver={()=>{
                    let h3s = document.getElementsByClassName("h3")
                    h3s[index].classList.add('h33')
                  }}
                  onMouseOut={()=>{
                    let h3s = document.getElementsByClassName("h3")
                    h3s[index].classList.remove('h33')
                  }}
                  onClick={()=>{
                    navigate(`/detail/${item.id}`,{
                      state:{
                        item:item
                      }
                    })
                  }}
                  >
                    <div className='aritcle-li-box'>
                      <h3 className='h3'>{item.title}</h3>
                      <span>{item.createAt.split('-')[0]}年{item.createAt.split('-')[1]}月{item.createAt.split('-')[2].split('T')[0]}日{item.createAt.slice(11,13)}时{item.createAt.slice(14,16)}分</span>
                    </div>
                    <div className='article-li-box2'>
                      <span><HeartOutlined /> {item.likes}</span>
                      <span><EyeOutlined /> {item.views}</span>
                      <span><BranchesOutlined /> 分享</span>
                    </div>
                  </li>
                })
              }
          </ul>
          <div ref={watcherDom}>检测元素</div>
      </div>
  )
}
